<template>
  <div class="root">
    <div class="header w">
      <div class="title">IOB-KG知识图谱</div>

      <div class="user option" @click="registerDialogVisible = true">
        <i class="el-icon-circle-plus-outline unhover" />
        <i class="el-icon-circle-plus hover" />
        <span> 注册</span>
      </div>

      <div
        class="user option"
        v-if="user === null"
        @click="loginDialogVisible = true"
      >
        <i class="el-icon-user unhover" />
        <i class="el-icon-user-solid hover" />
        <span> 登录</span>
      </div>

      <el-popover width="160" v-model="logoutPopoverVisible" placement="bottom">
        <el-button
          plain
          @click="logout"
          style="width: 100%"
          >登出</el-button
        >
        <div
          class="user option"
          v-if="user !== null"
          slot="reference"
          @click="logoutPopoverVisible = true"
        >
          <i class="el-icon-user unhover" />
          <i class="el-icon-user-solid hover" />
          <span> {{ user.username }}</span>
        </div>
      </el-popover>
    </div>

    <BuildKg :user="user" @buildSuccess="buildSuccess" @adviceLogin="adviceLogin"/>

    <MyKg ref="MyKg" v-if="user !== null" />

    <ImportKg :user="user" @buildSuccess="buildSuccess" @adviceLogin="adviceLogin"/>

    <KgQA />

    <div class="footer w">
      <div>IOB-KG知识图谱 学习、构建知识图谱</div>
    </div>

    <el-dialog title="登录" :visible.sync="loginDialogVisible" width="40%">
      <Login @loginSuccess="loginSuccess" />
    </el-dialog>

    <el-dialog title="注册" :visible.sync="registerDialogVisible" width="40%">
      <Register @registerSuccess="registerSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import MyKg from "./components/MyKg";
import BuildKg from "./components/BuildKg";
import ImportKg from "./components/ImportKg";
import KgQA from "./components/KgQA";
import { getCurrengUser, logoutAPI } from "../../api/identify/identify";
import Login from "./components/Login";
import Register from "./components/Register";

export default {
  name: "KgBuilder",
  components: { Register, Login, ImportKg, MyKg, BuildKg, KgQA },
  comments: {
    MyKg
  },
  data() {
    return {
      user: null,
      loginDialogVisible: false,
      registerDialogVisible: false,
      logoutPopoverVisible: false
    };
  },
  created() {
    getCurrengUser(
      res => {
        this.user = res;
      },
      errorMessage => {
        this.$message.error("获取用户信息失败:" + errorMessage);
      }
    );
  },
  methods: {
    loginSuccess(user) {
      this.loginDialogVisible = false;
      this.user = user;
    },
    registerSuccess() {
      this.registerDialogVisible = false;
    },
    logout() {
      logoutAPI(
        () => {
          this.$message.success("登出成功!");
          this.user = null;
        },
        (errorMessage) => {
          this.$message.error("登出失败: " + errorMessage);
        }
      );
      this.logoutPopoverVisible = false;
    },
    buildSuccess(kg) {
      this.$refs.MyKg.buildKg(kg);
    },
    adviceLogin() {
      this.$notify({
        title: "请登录",
        message:
          "这个功能需要存储或者修改一些数据,请先注册并登录.",
        duration: 5000
      });
      // this.loginDialogVisible = true;
    }
  }
};
</script>

<style scoped>
.header {
  height: 50px;
}
.header .title {
  box-sizing: border-box;
  float: left;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: rgb(217, 236, 255) solid 5px;
}

.header .option {
  box-sizing: border-box;
  float: right;
  margin-left: 20px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;
}
.header .option:hover {
  border-bottom: rgb(217, 236, 255) solid 5px;
}
.header .option:hover .hover,
.header .option .unhover {
  display: inline-block;
}
.header .option .hover,
.header .option:hover .unhover {
  display: none;
}

.footer {
  margin-top: 20px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  color: #7f7f7f;
}
</style>
